<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register Page</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/register.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/register.js"></script>
    <!-- 添加处理服务器端alert的脚本 -->
    <script>
        // 处理服务器端的phoneExists标志
        window.addEventListener('load', function() {
            <% if (request.getAttribute("phoneExists") != null && (boolean) request.getAttribute("phoneExists")) { %>
                alert("手机号已存在，请选择其他手机号！");
            <% } %>
        });
    </script>
</head>
<body>
    <div class="container">
        <h2 class="title">用户注册</h2>
        <form action="${pageContext.request.contextPath}/register" method="post" onsubmit="return validateForm();">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username">
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password">
            </div>
            <div class="form-group">
                <label for="phone">选择手机号:</label>
                <input type="text" id="phone" name="phone" readonly>
            </div>
            <div class="form-group">
                <label>可选手机号:</label>
                <div id="phone-numbers" class="mt-2"></div>
            </div>
            <div class="form-group">
                <label for="userpackage">套餐:</label>
                <select id="userpackage" name="userpackage">
                    <option value="1">套餐 1: 20 条短信, 1GB 流量, 200 分钟话费, 花费 50 元</option>
                    <option value="2">套餐 2: 0 条短信, 10GB 流量, 0 分钟话费, 花费 60 元</option>
                    <option value="3">套餐 3: 50 条短信, 5GB 流量, 500 分钟话费, 花费 150 元</option>
                </select>
            </div>
            <div class="form-group">
                <label for="balance">输入预存金额:</label>
                <input type="text" id="balance" name="balance">
            </div>
            <div class="error-message">当前余额不足套餐余额，请重新充值</div>
            <div class="flex justify-center">
                <input type="submit" value="注册" class="submit-btn">
            </div>
        </form>
        <div class="flex justify-center mt-4">
            <button onclick="window.location.href='${pageContext.request.contextPath}/index'" class="exit-btn">退出</button>
        </div>
    </div>
</body>
</html>